<template>
    <div>
        <div>
            <label>
                ID:
                <input type="text" v-model="id">
            </label>
            <label>
                NAME:
                <input type="text" v-model="name">
            </label>
            <button @click="addFirst">添加到第一个</button>
            <button @click="addEnd">添加到最后一个</button>
        </div>
        <!--       注意：
        v-for循环的时候，key属性只能使用number或String。
        key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值。
        在组件中使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的 字符串/数字 类型 :key值
            -->
        <p v-for="item in list" v-bind:key="item.uuid">
            <input type="checkbox" name="" id="" value=""/>
            {{item.id}} :{{item.name}}
        </p>


    </div>
</template>

<script>
    import { uuid } from 'vue-uuid';
    export default {
        name: "TestDemo",
        data() {
            return {
                id: undefined,
                name: '',
                list: [
                    {id: 1, name: 'qwer',uuid: uuid.v4()},
                    {id: 2, name: 'wasd',uuid: uuid.v4()},
                    {id: 3, name: 'qazf',uuid: uuid.v4()}
                ]

            }
        },
        methods: {

          /**
           * 一些操作数组的方法，编译会检测，从而会促使视图更新。

           变异方法
           push()
           pop()
           shift()
           unshift()
           splice()
           sort()
           reverse()
           上面这些数组操作方法，会直接改变原始数组称为变异方法，会促使视图自动更新。
           *
           *
           */


          addFirst() {
                this.list.unshift({id: this.id, name: this.name,uuid: uuid.v4()})
            },
            addEnd() {
                this.list.push({id: this.id, name: this.name,uuid: uuid.v4()})
            }
        }
    }
</script>

<style scoped>

</style>
